<template>
    <div
        class="md:w-52 w-full md:h-36 h-48 mb-3 bg-cover bg-no-repeat bg-center flex-shrink-0 md:rounded-md"
        :style="'background-image: url(' + image + ')'"
    ></div>
    <router-link :to="path" class="md:w-96">
        <div class="topicTitle text-xl py-1">{{ title }}</div>
        <div class="py-1">{{ content }}</div>
        <div class="text-sm text-link py-1">{{ link }}</div>
    </router-link>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
defineProps([
    'path',
    'title',
    'link',
    'content',
    'image'
])
</script>

<style lang="scss" scoped>
</style>